<!--第一个未知图像 第二个类似打开 -->
<template>
    <div class="ContactSvg" :style="{background: bgColor}" v-if="relatedType === 1 || relatedType === 2">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="50" width="80">
            <path v-if="relatedType === 2" d="M 0 25 10 25 M 10 18 10 32 M 14 22 14 28 M 0 0 80 0 80 50 0 50 0 0 M 30 15 30 35 50 35 50 15 30 15 M 50 25 80 25" :stroke="color" stroke-width="3" fill="none" />
            <path v-if="relatedType === 1" d="M 0 0 80 0 80 50 0 50 0 0 M 0 25 25 25 M 55 25 80 25 M 28 24 53 10 M 26 23 25 24 24 25 25 26 26 27 27 26 28 25 27 24 26 23 M 53 23 52 24 51 25 52 26 53 27 54 26 55 25 54 24 53 23" :stroke="color" stroke-width="3" fill="none" />
        </svg>
    </div>
</template>

<script>

export default {
    props: {
        with: {
            type: Number,
            default () {
                return 80
            }
        },
        height: {
            type: Number,
            default () {
                return 50
            }
        },
        // 0监测点关联 1母联
        relatedType: {
            type: Number,
            default () {
                return 1
            }
        },
        color: {
            type: String,
            default () {
                return '#007eff'
            }
        },
        bgColor: {
            type: String,
            default () {
                return '#212120'
            }
        }
    },
    name: 'ContactSvg',
    components: {
    }
}
</script>

<style lang="scss" scoped>
.ContactSvg {
    width: 80px;
    height: 50px;
    position: absolute;
    left: calc(50% - 40px);
    bottom: -26px;
    transform: scale(0.8);
}
</style>
